import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Spin, Row, Col, Divider } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';

const FormItem = Form.Item;
@connect(({ material, loading, templatesettings }) => ({
  material,
  templatesettings,
  loading: loading.models.templatesettings,
}))
class DetailEmail extends React.Component {
  state = {};

  componentDidMount() {
    const { dispatch, location } = this.props;
    dispatch({
      type: 'templatesettings/fetchEmailDetail',
      payload: { emlMsgTemplateId: location.query.id },
    });
  }

  submitcancel = () => {
    router.goBack();
  };

  render() {
    const { templatesettings, loading } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 8,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 16,
        },
      },
    };
    const formItemLayout1 = {
      labelCol: {
        xs: {
          span: 18,
        },
        sm: {
          span: 4,
        },
      },
      wrapperCol: {
        xs: {
          span: 18,
        },
        sm: {
          span: 18,
        },
      },
    };
    return (
      <PageHeaderWrapper>
        <Spin tip="Loading..." spinning={loading}>
          <div>
            <Card title="查看邮件/短信模板" bordered={false}>
              <Form>
                <Row>
                  <Col span={8}>
                    <FormItem {...formItemLayout} label={<span>地区 </span>}>
                      <span>{templatesettings.areaIdName}</span>
                    </FormItem>
                  </Col>
                  <Col span={8}>
                    <FormItem {...formItemLayout} label="合同类型:">
                      <span>{templatesettings.contTypeName}</span>
                    </FormItem>
                  </Col>
                  <Col span={8}>
                    <FormItem {...formItemLayout} label={<span>备注</span>}>
                      <span>{templatesettings.remark}</span>
                    </FormItem>
                  </Col>
                </Row>
              </Form>
              <Divider />
              <Row>
                <Col span={22}>
                  <FormItem {...formItemLayout1} label={<span>短信模版 </span>}>
                    <span dangerouslySetInnerHTML={{ __html: templatesettings.msgContent }} />
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span={22}>
                  <FormItem {...formItemLayout1} label={<span>邮件模版 </span>}>
                    <span dangerouslySetInnerHTML={{ __html: templatesettings.emlTheme }} />
                  </FormItem>
                  <Col offset={4} style={{ marginTop: -16 }}>
                    <FormItem {...formItemLayout1}>
                      <span dangerouslySetInnerHTML={{ __html: templatesettings.emlContent }} />
                    </FormItem>
                  </Col>
                </Col>
              </Row>
            </Card>

            <Card title="特殊产品设置">
              {templatesettings.emlMsgTemplateAsscs && templatesettings.emlMsgTemplateAsscs.length
                ? templatesettings.emlMsgTemplateAsscs.map(item => (
                    // eslint-disable-next-line react/jsx-indent
                    <div key={item.emlMsgTemplateId}>
                      <Row>
                        <Col span={22}>
                          <FormItem {...formItemLayout1} label={<span>关联产品</span>}>
                            {item.pdName}
                          </FormItem>
                        </Col>
                      </Row>
                      <Row>
                        <Col span={22}>
                          <FormItem {...formItemLayout1} label={<span>短信模版</span>}>
                            <span dangerouslySetInnerHTML={{ __html: item.msgContent }} />
                          </FormItem>
                        </Col>
                      </Row>
                      <Row>
                        <Col span={22}>
                          <FormItem {...formItemLayout1} label={<span>邮件模版</span>}>
                            {item.emlTheme}
                          </FormItem>
                          <Col offset={4} style={{ marginTop: -16 }}>
                            <FormItem {...formItemLayout1}>
                              <span dangerouslySetInnerHTML={{ __html: item.emlContent }} />
                            </FormItem>
                          </Col>
                        </Col>
                      </Row>
                    </div>
                  ))
                : '暂无数据'}
            </Card>
          </div>
        </Spin>
        <FooterToolbar>
          <Button onClick={this.submitcancel}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}
export default DetailEmail;
